<!-- 第四页-->
<template>

  <div>
    <!-- <div id="page-four" class="page-four" :style=" 'height:'+curHeight+'px' ">1</div> -->
    <!-- type="textarea"
    :autosize="{ minRows: 1, maxRows: 4}" -->

    <!--el-collapse v-model="activeNames" style="border: 0;">
      <el-collapse-item style="height: 0; margin-botttom:0;  background-color: unset" name="nav"-->
    <!-- 导航栏 -->
    <nav-menu :pageIndex="pageIndex"></nav-menu>
    <!--/el-collapse-item>
  </el-collapse-->
    <div v-title :data-title="'来源信息-'+retData.from.name"></div>
    <div id="page-four" class="page-four">

      <el-col>
        <el-row>

          <el-col :span="6"><i class="el-icon-notebook-2" style="font-size:160px"></i></el-col>
          <el-col :span="18">
            <div class="grid-content bg-card" style="margin-right: 1vw; margin-top: 1vh; font-size:32px;">
              <p v-if="retData.from.from_code==='conference'">会议: {{ retData.from.name }}</p>
              <p v-else-if="retData.from.from_code==='periodical'">期刊: {{ retData.from.name }}</p>
              <p v-else>报纸: {{ retData.from.name }}</p>
            </div>
            <!--            <div class="grid-content bg-card-light" style="margin-right: 1vw; margin-top: 1vh;" v-for="(item,index) in retData.author.institution" :key="index" >{{item}}</div>-->

          </el-col>
        </el-row>
        <el-divider></el-divider>
        <el-row>
          <p style="font-size: 20px">研究兴趣分布</p>
          <el-col :span="12" style="border: 1px solid #ededed;">
            <el-row :span="4">
              <el-select size="small" v-model="value" placeholder="请选择">
                <el-option
                    v-for="item in times"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                </el-option>
              </el-select>
            </el-row>
            <el-row :span="20" style="width: calc(100% - 30px); height: 500px; margin: 0 10px 10px 0;">
              <chartPie :data="distribution[value]"></chartPie>
            </el-row>
          </el-col>

          <el-col :span="12" style="border: 1px solid #ededed;">
            <el-row :span="23" style="width: calc(100% - 30px); height: 550px; margin: 0 10px 10px 0;">
              <chartBarVertical :xAxis="bartimes" :data="cites"></chartBarVertical>
            </el-row>
          </el-col>
        </el-row>
        <el-divider></el-divider>
        <el-row>
          <el-col :span="20" style="border: 1px solid #ededed;">
            <div class="grid-content bg-card" style="font-size:18px;">论文推荐：{{retData.papers.length}}篇</div>
            <div style="min-height: 40vh">
              <div v-for="(item,index) in retData.papers.slice((currentPage-1)*pageSize,currentPage*pageSize)" :key="index">
                <el-card class="box-card">
                  <el-link
                      :href="'/#/paper?id=' + encodeURI(item.id)"
                      target="_blank" class="title" type="primary">
                    {{ item.title }}
                  </el-link>
                  <!--              <el-link :href="'#/paper?id=&title='+item.title+'&resource='+item.resource" target="_blank" class="title" type="primary">-->
                  <!--                {{ item.title }}-->
                  <!--              </el-link>-->
                  <br/>
                  <p class="author"><span style="font-size: 16px;color:#909399">作者：</span>{{ item.author }}</p>
                  <p class="institution"><span style="font-size: 16px;color:#909399">机构：</span>{{ item.institution }}</p>
                  <p class="date"><span style="font-size: 16px;color:#909399">时间：</span>{{ item.pubdate }}</p>
                  <p class="abstract"><span style="font-size: 14px;color:#909399">摘要：</span>{{ item.abstract }}</p>
                  <!--              <p class="content"><br>{{ item.author }}</p>-->
                  <!--              <p class="id">{{ item.id }}</p>-->
                </el-card>
              </div>
              <el-pagination
                  @size-change="handleSearchSizeChange"
                  @current-change="handleCurrentChange"
                  :current-page.sync="currentPage"
                  :page-sizes="[10, 20, 50, 100]"
                  :page-size="pageSize"
                  layout="sizes, total, prev, pager, next, jumper"
                  :total="totalPages">
              </el-pagination>
            </div>
          </el-col>

          <el-col :span="4" style="border: 1px solid #ededed;">
            <div class="grid-content bg-card" style="font-size:18px;">代表作者</div>
            <div v-for="(item,index) in retData.author" :key="index">
              <el-card class="box-card">
                <el-link
                    :href="'/#/author?id=' + encodeURI(item.id)"
                    target="_blank" class="title" type="primary">
                  {{ item.name }}
                </el-link>
                <!--              <el-link :href="'#/paper?id=&title='+item.title+'&resource='+item.resource" target="_blank" class="title" type="primary">-->
                <!--                {{ item.title }}-->
                <!--              </el-link>-->
                <br/>
                <p class="institution"><span style="font-size: 16px;color:#909399">文章数：</span>{{ item.count }}篇</p>
              </el-card>
            </div>
          </el-col>

        </el-row>
      </el-col>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import NavMenu from "@/components/NavMenu.vue";
import chartPie from "@/components/chartPie";
import chartBarVertical from "@/components/chartBarVertical"; //导航栏组件


export default {
  components: {
    NavMenu,
    chartPie,
    chartBarVertical
  },
  data() {
    return {
      pageIndex: "1", //当前页的序号
      scrolltop: 0, //滑轮距顶部的距离

      curHeight: "", //窗口高度

      retData: {},//{"name": "\u7aa6\u5c1a\u6210", "institution": ["\u4e0a\u6d77\u5927\u5b66\u7cbe\u5bc6\u673a\u68b0\u7cfb"], "id": "\u7aa6\u5c1a\u6210", "paper": ["\u4e00\u7c7b\u65e0\u4eba\u76f4\u5347\u673a\u7684\u65cb\u7ffc\u64cd\u7eb5\u673a\u6784\u7684\u5206\u6790"], "paperid": ["_home_xiaorui_data_zhiwang_CJFD_C031\u671f\u520a.txt35118"], "nodesData": [{"name": "\u7aa6\u5c1a\u6210", "id": "\u7aa6\u5c1a\u6210", "type": "author"}, {"name": "\u4e00\u7c7b\u65e0\u4eba\u76f4\u5347\u673a\u7684\u65cb\u7ffc\u64cd\u7eb5\u673a\u6784\u7684\u5206\u6790", "id": "_home_xiaorui_data_zhiwang_CJFD_C031\u671f\u520a.txt35118", "type": "paper"}, {"name": "\u4e0a\u6d77\u5927\u5b66\u7cbe\u5bc6\u673a\u68b0\u7cfb", "id": "\u4e0a\u6d77\u5927\u5b66\u7cbe\u5bc6\u673a\u68b0\u7cfb", "type": "institution"}], "linksData": [{"source": "\u4e00\u7c7b\u65e0\u4eba\u76f4\u5347\u673a\u7684\u65cb\u7ffc\u64cd\u7eb5\u673a\u6784\u7684\u5206\u6790", "target": "\u7aa6\u5c1a\u6210", "type": "written_by"}, {"source": "\u7aa6\u5c1a\u6210", "target": "\u4e0a\u6d77\u5927\u5b66\u7cbe\u5bc6\u673a\u68b0\u7cfb", "type": "institution_is"}]},

      bartimes: [],
      cites: [],
      times: [],
      value: '',
      distribution: {},

      currentPage: 1,
      totalPages: 0,
      pageSize: 10,

      loading: false,
      nowid: ''
    };
  },
  mounted() {
    this.loadAll();
  },
  watch: {
    // 监听路由发生改变
    '$route': {
      handler(newVal) {
        if (newVal.query.q)
          this.loadAll();
      }
    }
  },
  methods: {
    loadAll() {
      this.nowid = this.$route.query.id;
      //Vue.prototype.post('/api/papers', {}, this.getPapersSucc)
      this.onGetData(this.nowid);
    },
    onGetData(id) {
      this.nowid = id;
      Vue.prototype.post('http://192.168.0.94:2226/show_frompage', {
        "id": id
      }, this.onGetDataSucc)
    },
    onGetDataSucc(response) {
      console.log('AuthorPage:', response)
      if (response.data.retcode === 0) {
        this.retData = response.data;

        this.totalPages = this.retData.papers.length
        response.data.times.forEach(item => {
          this.times.push({
            label: item,
            value: item
          })
        })
        if (this.times.length > 0) {
          this.value = this.times[0].value
        }

        this.distribution = response.data.distribution

        this.bartimes = response.data.bartimes
        this.cites = response.data.cites
      } else {
        alert(Vue.$t('error.getResponse'))
      }
    },
    handleCurrentChange (val) {
      console.log(`当前页: ${val}`)
      this.curPage = val
    },
    handleSearchSizeChange (val) {
      console.log(`每页 ${val} 条`)
      this.currentPage = 1
      this.pageSize = val
    }
  }
};
</script>

<style lang='scss' scoped>
.chart_barVec {
  border: 1px solid #ededed;
  width: calc((100% - 30px) / 2);
  height: 450px;
  margin: 0 10px 10px 0;
}
.chart_pie {
  border: 1px solid #ededed;
  width: calc((100% - 30px) / 2);
  height: 500px;
  margin: 0 10px 10px 0;
}

.body {
  position: absolute;
  top: 140px;
  left: 0;
  width: 100%;
}

.box-card {
  margin: 10px;
}

.title {
  font-size: 20px;
  float: left;
  text-align: left;
}

.author {
  font-size: 16px;
  color: #000;
  text-align: left;
}

.institution {
  font-size: 16px;
  color: #000;
  text-align: left;
}

.date {
  font-size: 16px;
  color: #000;
  text-align: left;
}

.abstract {
  font-size: 14px;
  line-height: 30px;
  color: #000;
  text-align: left;
}

.box-card {
  margin-top: 8px;
  filter: Alpha(opacity=80);
  opacity: 0.8;
  background: rgba(255, 255, 255, 0.4);
  margin-bottom: 10px;
}

.page-four {
  font-size: 50px;
  //color: #fff;
  //background-color: # 6db9ff;
  box-sizing: border-box;
  padding-left: 20px;
  padding-top: 50px;
}

.clear {
  display: flex;
  width: 62%;
  justify-content: space-between;

  .el-select {
    width: 24%;
  }
}

.el-row {
  margin-bottom: 1vh;

  &:last-child {
    margin-bottom: 0;
  }
}

.el-col {
  border-radius: 5px;
  align-items: center;
}

.bg-card {
  //background: #d3dce6;
  color: #000;
  font-weight: bold;
  text-align: left;
}

.bg-card-light {
  color: #000;
  text-align: left;
  font-size: 14px;
  //background: #e5e9f2;
}

.grid-content {
  font-size: 14px;
  padding: 1vh 1vw;
  border-radius: 5px;
  align-items: center;
  //min-height: 2vh;
}

.inline-input {
  width: 62%;
}

.tabs {
  width: 90%;
  text-align: left;
}

/* 定义滚动条样式 */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
  background-color: rgba(240, 240, 240, 1);
}

/*定义滚动条轨道 内阴影+圆角*/
::-webkit-scrollbar-track {
  box-shadow: inset 0 0 0px rgba(240, 240, 240, .5);
  border-radius: 10px;
  background-color: rgba(240, 240, 240, .5);
}

/*定义滑块 内阴影+圆角*/
::-webkit-scrollbar-thumb {
  border-radius: 10px;
  box-shadow: inset 0 0 0px rgba(120, 120, 120, .5);
  background-color: rgba(120, 120, 120, .5);
}
</style>
